<template>
  <component :is="component"></component>
</template>

<script>
export default {
  name: "ExIcon",

}
</script>
<script setup>
import {ref ,h , getCurrentInstance,watch} from "vue";
const props = defineProps({
  icon:String,
})
const component = ref()
const components = getCurrentInstance().appContext.components
watch(()=>props.icon,value=>{
  loadIcon()
})
loadIcon()

function loadIcon(){
  let name
  if(props.icon.indexOf('fa-') === -1){
    name = lineToCamel(props.icon)
    if(components[name]){
      name = components[name]
    }
  }else{
    name = props.icon
  }
  if(typeof(name) == 'string'){
    component.value  = h('span',{class:'anticon',style:{verticalAlign:0}},h('i',{
      class:name
    }))
  }else{
    component.value = name
  }
}

function lineToCamel(str) {
  if(!str){
    return str
  }
  str = str.replace(/\-(\w)/g, (all,letter)=>letter.toUpperCase())
  return str[0].toUpperCase() + str.substr(1)
}

</script>

<style scoped>

</style>
